<template>
    <div class="demo-collapse">
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="问题描述" name="des">
                <div class="detail">
                    <img class="image" src="../../../../../assets/归并排序/归并排序2.jpeg">
                    <div class="text">
                        归并排序（Merge Sort）是一种基于分治思想的排序算法，它将待排序的数组分成两部分，
                        分别对这两部分递归地进行排序，最后将两个有序子数组合并成一个有序数组。它的时间复杂度为 O(nlogn)。
                    </div>
                </div>
            </el-collapse-item>
            <el-collapse-item title="相关研究" name="3">
                <ul>
                    <li v-for="item in thesisData" :key="item.title">
                        <a :href="item.link" target="_blank">
                            <div class="thesis">
                                <img class="thesis-cover" src="../../../../../icons//thesis.svg" alt="">
                                <div class="thesis-title">
                                    {{item.title}}
                                </div>
                                <div class="thesis-author">
                                    <span>作者：</span>{{ item.author }}
                                </div>
                                <div class="thesis-time">
                                    <span>时间：</span>{{ item.time }}
                                </div>
                                <div class="thesis-source">
                                    <span>来源：</span>{{ item.source }}
                                </div>
                            </div>
                        </a>
                    </li>
                </ul>
            </el-collapse-item>
            <el-collapse-item title="应用领域" name="4">
                <div class="detail">
                    <img class="use" src="../../../../../assets/归并排序/归并排序1.png" alt="">
                    <div class="text">
                        <div>归并排序的应用场景比较广泛，主要适用于以下几种情况：</div>
                        <div>
                            1.对于大规模的数据排序：归并排序的时间复杂度为 O(nlogn)，相比于其他排序算法如冒泡排序、插入排序等，它在处理大规模数据时更加高效。<br>
                            2.对于稳定排序的需求：归并排序是一种稳定排序算法，即对于相等的元素，在排序前后它们的相对位置不会改变。<br>
                            3.对于需要保证排序稳定性的需求：归并排序是一种基于比较的排序算法，不依赖于数据的初始状态，具有较好的稳定性。
                            4.对于需要多路排序的需求：归并排序可以轻松地扩展到多路排序，即将待排序的数组分成多个子数组，对每个子数组分别进行归并排序，
                              然后将它们合并成一个有序数组。<br>
                            5.对于需要外部排序的需求：归并排序可以应用于外部排序，即在排序过程中将数据存储在外部存储器中，
                              而不是在内存中。在外部排序中，需要使用多路归并排序来合并不同的子文件。<br>
                            总的来说，归并排序是一种高效、稳定的排序算法，适用于大规模数据的排序、需要保证排序稳定性的需求以及外部排序等场景。

                        </div>
                    </div>
                </div>
            </el-collapse-item>
        </el-collapse>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const activeNames = ref(['1'])
const handleChange = (val: string[]) => {
    console.log(val)
}

// 相关研究部分
const thesisData=[
    {
        title:"基于递归与分治的排序算法教学探究",
        author:"张忠诚，鲁法明",
        time:"2019年",
        source:"百度学术",
        link:"https://xueshu.baidu.com/usercenter/paper/show?paperid=1e120280ws5e02j0hr4j0em0ek015841&site=xueshu_se",
    },
    {
        title:"一种新的并行归并排序算法",
        author:"王文义，邱涌",
        time:"2005年",
        source:"百度学术",
        link:"https://xueshu.baidu.com/usercenter/paper/show?paperid=63fe4b21fd1b837884e92f92b2d349e4&site=xueshu_se",
    },
    {
        title:"分治策略在归并排序中的算法设计",
        author:"李六杏",
        time:"2015年",
        source:"百度学术",
        link:"https://xueshu.baidu.com/usercenter/paper/show?paperid=1h5p0cs09h2d08k0yc070240dw384801&site=xueshu_se",
    },

]
</script>

<style scoped lang="scss">
* {
    list-style: none;
}
.image {
    width: 290px;
    border-radius: 10px;
}
a {
	text-decoration: none; /* 去除默认的下划线 */
	outline: none;	/* 去除旧版浏览器的点击后的外虚线框 */
	color: #000;	/* 去除默认的颜色和点击后变化的颜色 */ 
}

.detail {
    display: flex;
    justify-content: center;
    align-items: end;

    .text {
        margin-left: 10px;
        cursor: default;
    }

    .use {
        width: 240px;
        height: 150px;
        border-radius: 10px;
    }
}

// 相关研究部分
.thesis {
    width: 98%;
    position: relative;
    left: 20px;
    margin-bottom: 10px;
    font-weight: normal;
    background:#F5F5F5;
    border-radius: 10px;
    transition: all 0.2s linear;
    .thesis-title {
        position: absolute;
        top: 0;
        left: 5px;
    }
  
    .thesis-author {
        position: absolute;
        top: 25px;
        left: 120px;
    }

    .thesis-time {
        position: absolute;
        top:45px;
        left: 120px;
    }
    .thesis-source {
        position: absolute;
        top: 65px;
        left: 120px;
    }
    &:hover {
        cursor: pointer;
        transform: translateX(-15px);
    }
}
</style>